import createElement from "./createElement";
import patchVnode from "./patchVnode";
// 判断两个虚拟节点是否为同一个节点
function sameVnode(vNode1, vNode2) {
  return vNode1.key == vNode2.key;
}

/**
 * 
 * @param {真实dom的旧节点} parentElm 
 * @param {旧的孩子} oldCh 
 * @param {新的孩子} newCh 
 */
export default function updateChildren(parentElm, oldCh, newCh) {
  console.log("parentElm", parentElm);
  const btn = document.createElement('btn');
  parentElm.insertBefore(btn, parentElm.children[0]);
  console.log("parentElm", parentElm);
  console.log("oldCh", oldCh);
  console.log("newCh", newCh);
  // 新旧指针
  let oldStartIndex = 0, oldEndIndex = oldCh.length - 1;
  let newStartIndex = 0, newEndIndex = newCh.length - 1;
  // 旧前后虚拟节点
  let oldStartVnode = oldCh[0], oldEndVnode = oldCh[oldEndIndex];
  // 新前后虚拟节点
  let newStartVnode = newCh[0], newEndVnode = newCh[newEndIndex];


  while(oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) {
    if(oldStartVnode == undefined) {
      oldStartVnode = oldCh[++oldStartIndex];
    } 
    if(oldEndVnode == undefined) {
      oldEndVnode = oldCh[++oldEndIndex];
    } else if(sameVnode(oldStartVnode, newStartVnode)) {
      console.log("1")
      // 旧前与新前
      patchVnode(oldStartVnode, newStartVnode);
      if(newStartVnode) newStartVnode.elm = oldStartVnode?.elm;
      oldStartVnode = oldCh[++oldStartIndex];
      newStartVnode = newCh[++newStartIndex];
    } else if(sameVnode(oldEndVnode, newEndVnode)) {
      console.log("2")
      // 旧后与新后
      patchVnode(oldEndVnode, newEndVnode);
      if(newEndVnode) newEndVnode.elm = oldEndVnode?.elm;
      oldEndVnode = oldCh[--oldEndIndex];
      newEndVnode = newCh[--newEndIndex];
    } else if(sameVnode(oldStartVnode, newEndVnode)) {
      console.log("3")
      patchVnode(oldStartVnode, newEndVnode);
      // 旧前与新后
      if(newEndVnode) newEndVnode.elm = oldStartVnode?.elm;
      // 把旧前指定的节点移动到旧后指向的节点的后面oldEndVnode
      console.log("第三种情况的旧节点", oldStartVnode.elm, oldEndVnode.elm);
      parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling);
      oldStartVnode = oldCh[++oldStartIndex];
      newEndVnode = newCh[--newEndIndex];
    } else if(sameVnode(oldEndVnode, newStartVnode)) {
      console.log("4")
      patchVnode(oldEndVnode, newStartVnode);
      // 旧后与新前
      if(newStartVnode) newStartVnode.elm = oldEndVnode?.elm;
      // 把旧后指定的节点移动到新前指向的节点的后面
      parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm);
      oldEndVnode = oldCh[--oldEndIndex];
      newStartVnode = newCh[++newStartIndex];

    } else {
      console.log('5');
      // 以上都不满足
      // 创建一个对象，存放虚拟节点，判断新旧有没有相同的节点
      const keyMap = {};
      for(let i = oldStartIndex; i <= oldEndIndex; i++) {
        const key = oldCh[i]?.key;
        if(key) keyMap[key] = i;
      }
      console.log(keyMap);
      // 在旧的节点中寻找新前指向的节点
      let idxInOld = keyMap[newStartVnode.key];
      if(idxInOld) {
        // 如果有，说明该节点在新旧节点中都存在
        const elmMove = oldCh[idxInOld];
        patchVnode(elmMove, newStartVnode);
        // 处理过的节点,在就虚拟节点中，设置undefined
        oldCh[idxInOld] = undefined;
        parentElm.insertBefore(elmMove.elm, oldStartVnode.elm);
      } else {
        // 没有找到，说明是一个新的节点【创建】
        parentElm.insertBefore(createElement(newStartVnode), oldStartVnode.elm);
      }
      newStartVnode = newCh[++newStartIndex];
    }
  }
  if(oldStartIndex > oldEndIndex) {
    const before = newCh[newEndIndex + 1] ? newCh[newEndIndex + 1].elm : null;
    for(let i = newStartIndex; i <= newEndIndex; i++) {
      parentElm.insertBefore(createElement(newCh[i]), before);
    }
  } else {
    for(let i = oldStartIndex; i <= oldEndIndex; i++) {
      parentElm.removeChild(oldCh[i].elm);
    }
  }

}